<template>
  <div class="page-switch">
    <div class="page-title">Switch</div>
    <div class="page-part page-switch-padding">
      <mt-switch v-model="value1" @change="handleChange">
        <label v-text="value1"></label>
      </mt-switch>
    </div>

    <div class="page-part page-switch-padding">
      <mt-switch v-model="value4" @change="handleChange">
        <label v-text="value4"></label>
      </mt-switch>
    </div>

    <mt-cell :title="'选项 ' + value2">
      <mt-switch v-model="value2" @change="handleChange"></mt-switch>
    </mt-cell>
    <mt-cell :title="'选项 ' + value3">
      <mt-switch v-model="value3" @change="handleChange"></mt-switch>
    </mt-cell>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue';
  import Switch from 'mint-ui/lib/switch';
  import 'mint-ui/lib/switch/style.css';

  import Cell from 'mint-ui/lib/cell';
  import 'mint-ui/lib/cell/style.css';

  Vue.component(Switch.name,Switch)
  Vue.component(Cell.name,Cell)

    export default {
        data() {
            return {
              value1: false,
              value2: false,
              value3: true,
              value4: true
            }
        },

      methods: {
        handleChange(event) {
          console.log(event);
        }
      }
    }
</script>
